<template>
<div>

<!-- 查询表单 -->
<p>
<el-select v-model="params.siteId"  clearable placeholder="请选择站点">
    <el-option
      v-for="item in siteList"
      :key="item.siteId"
      :label="item.siteName"
      :value="item.siteId">
    </el-option>
  </el-select>
页面别名：<el-input v-model="params.pageAliase" placeholder="请输入内容" style="width: 100px"></el-input>
<el-button type="primary" @click="query" size="small">查询</el-button>
<!-- 新增页面 -->
<!-- 说明：query表示在路由url上带上参数 -->
<router-link :to="{path:'/cms/page/add/',query:{
  page:this.params.page,
  siteId:this.params.siteId
}}">

<el-button type="primary" size="small">新增页面</el-button>
</router-link>
</p>
<!-- 数据表格 -->
<el-table
      :data="list"
      stripe
      style="width: 100%">
      <el-table-column prop="pageName" label="页面名称"  width="300"></el-table-column>
      <el-table-column prop="pageAliase" label="别名"  width="180"></el-table-column>
      <el-table-column prop="pageType" label="页面类型"  width="100"></el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径"  width="180"></el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径"  width="360"></el-table-column>
      <el-table-column prop="pageCreateTime" label="创建时间"  width="260"></el-table-column>

      <el-table-column  label="操作"  width="180">
        <template slot-scope="page">
          <el-button
          size="small" type="text"
          @click="edit(page.row.pageId)">编辑
          </el-button>

          <el-button
          size="small" type="text"
          @click="del(page.row.pageId)">删除
          </el-button>

          <el-button
          size="small" type="text"
          @click="preview(page.row.pageId)">页面预览
          </el-button>

          <el-button
          size="small" type="text"
          @click="postPage(page.row.pageId)">页面发布
          </el-button>

        </template>
      </el-table-column>

    </el-table>

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.params.page"
      :page-sizes="[10,20,50,100]"
      :page-size="this.params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total">
    </el-pagination>

</div>
</template>
<script>
  import  * as cmsApi from '../api/cms.js'
 export default {
    data() {
      return {
        siteList:[],//站点列表
        list:[],
        total:0,
        params:{
          page:1,//页码
          size:8,//每页显示个数
          siteId:'',//站点id
          pageAliase:'',//站点别名

          }
     }
},
created() {
  //取出路由当中的参数，赋值给当前数据对象
  this.params.page=Number.parseInt(this.$route.query.page||1),
  this.params.siteId=this.$route.query.siteId||''
},

mounted() {
  //默认查询页面
  this.query();
  //初始化站点列表
this.siteList = [
{
siteId:'5a751fab6abb5044e0d19ea1',
siteName:'门户主站'
},
{
siteId:'102',
siteName:'测试站'
}
]
},

   methods:{
   //分页查询
     handleCurrentChange:function (val) {//当前页码
      //console.log(`当前为地 ${page} 页`);
      this.params.page=val;
      this.query()
    },
    handleSizeChange:function(val){//每页显示条数
      //alert("pageSize改变时会触发")
      // console.log(`每页 ${size} 条`);
       this.params.size=val;
       this.query()
    },

  //查询
      query:function () {
        //alert("查询数据")
        //调用服务端的接口
        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
          //将res结果数据赋值给数据模型对象
          this.list=res.queryResult.list;
          this.total=res.queryResult.total;
          console.log("运行到此 pagelist")
        })
      },

    //修改
      edit:function(pageId){
        this.$router.push({
          path:'/cms/page/edit/'+pageId,query:{
            page:this.params.page,
            siteId:this.params.siteId
          }
        })
      },

    //删除
    del:function(pageId){
      this.$confirm('确认删除此页面吗?', '提示', {}).then(() => {
      cmsApi.page_del(pageId).then((res)=>{
      if(res.success){
      this.$message({
      type: 'success',
      message: '删除成功!'
      });
      //查询页面
      this.query()
      }else{
      this.$message({
      type: 'error',
      message: '删除失败!'
      });
      }
      })
      })

    },

    //页面预览
   preview(pageId){
     window.open("http://itxxw.net/cms/preview/"+pageId)
   },

   //页面发布
   postPage:function(id){
      this.$confirm('确认发布该页面吗？','提示',{}).then(() => {
        cmsApi.page_postPage(id).then((res) => {
          if(res.success){
            console.log('发布页面id='+id);
          }else{
            this.$message.error('发布失败');
          }
        });
      }).catch(() => {

      });
   },


  },
}

</script>
<style>

</style>
